/**
 * Created by charlie on 18-1-17.
 */
import React from 'react';
import {
    View,
    Text,
    StyleSheet,
    Button,
    FlatList,
    TextInput,
    TouchableOpacity,
    ScrollView,
    Icon,
    Modal
} from 'react-native'
import ScrollableTabView, {DefaultTabBar, } from 'react-native-scrollable-tab-view'
import {Actions} from 'react-native-router-flux';
import {Table, TableWrapper, Row, Rows, Col, Cols, Cell} from 'react-native-table-component';
import Color from '../../assets/colors';
import TabBar from '../../components/tabBar'
import Loading from '../../components/loading/loading'
import Pangitor from '../../routes/Pangitor'
import Colors from '../../assets/colors'


export default class TaskCenter extends React.Component {
    render() {
        const {tabChange,receiveTask,setTaskNewId,getTaskId,thisPersonSelect,thisTaskReceive,thisTaskCancle} = this.props;
        const {tabNum,list1,list2,list3,list4,loading,page,last,fun,tabChanged,receiveTaskName,
            userList,thisOpen,receiveTaskId} = this.props.taskCenter;
        return (
            <View style={{height:'100%',backgroundColor: Color.white,}}>
                <ScrollView style={[styles.baseV]}>
                    <View style={styles.baseH}>
                        <ScrollableTabView
                          // tabBarPosition='bottom'
                            tabBarTextStyle={{fontSize:18}}
                            tabBarUnderlineStyle={{backgroundColor:Color.btnPrimaryBg}}
                            initialPage={0}
                            renderTabBar={() => <DefaultTabBar/>}
                            onChangeTab={(obj) => {tabChange(obj.i)}}
                            tabBarActiveTextColor={tabChanged?Color.btnPrimaryBg:'red'}>
                            <Text tabLabel='未接收任务'/>
                            <Text tabLabel='已接收任务'/>
                            <Text tabLabel='超时任务'/>
                            <Text tabLabel='已办结'/>
                        </ScrollableTabView>
                    </View>
                    {
                        loading?<Loading />:
                            <View style={styles.baseV}>
                                <ListItem list1={list1} list2={list2} list3={list3} setTaskNewId={setTaskNewId} receiveTaskName={receiveTaskName}
                                          list4={list4} tabNum={tabNum} receiveTask={receiveTask} userList={userList} receiveTaskId={receiveTaskId}
                                          getTaskId={getTaskId} thisOpen={thisOpen} thisTaskReceive={thisTaskReceive}
                                          thisPersonSelect={thisPersonSelect} thisTaskCancle={thisTaskCancle}/>
                                <View style={{marginTop:-70}}>
                                    <Pangitor 　mainFunction={fun} namespace={'taskCenter'} currentPage={page} totalPage={last} />
                                </View>
                            </View>
                    }

                </ScrollView>
            </View>
        )
    }
}

class ListItem extends React.Component<{}> {
    render() {
        const {list1,list2,list3,list4,tabNum,receiveTask,setTaskNewId,getTaskId,receiveTaskName,
            userList,thisOpen,thisPersonSelect,receiveTaskId,thisTaskReceive,thisTaskCancle} = this.props
        //已接收
        const tableHead1 = ['工程名称', '任务名称', '下发时间','任务截止时间' ,'接收时间','操作'];
        //未接收
        const tableHead2 = ['工程名称', '任务名称', '下发时间','任务截止时间','操作'];
        //超时
        const tableHead3 = ['工程名称', '任务名称', '下发时间','任务截止时间' ,'状态','操作'];
        //已办结
        const tableHead4 = ['工程名称', '任务名称', '下发时间','任务截止时间' ,'接收时间','操作'];
        const ele = (value) => (
            <View style={{flexDirection:'row',alignItems:'center'}}>

                    <View style={styles.eleBtnContainer}>
                        {
                            tabNum == 0?<View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                                    <Text onPress={() => {receiveTask(list2[value].id,list2[value].taskNum,list2[value].name)}}
                                          style={list2[value].receiveStatus ==='1'?styles.eleBtnNo:styles.eleBtn}>{list2[value].receiveStatus ==='1'?'已被接收':'接收任务'}</Text>
                                </View>:
                                tabNum == 1?<View style={{flex:1,flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
                                        <View style={{flex:1}}>
                                            <Text onPress={


                                                  list1[value].signOutStatus === '0'?
                                                  list1[value].signInStatus === '' || list1[value].signInStatus === '0'?() =>{
                                                                                            getTaskId({type:'SignIn',id:list1[value].id})
                                                                                            Actions.push('SignIn')
                                                                                        }:
                                                  list1[value].isChangeForm !=='1'?() =>{
                                                                                            getTaskId({type:'RectifyBill',id:list1[value].id})
                                                                                            Actions.push('RectifyBill')
                                                                                        }:
                                                  () =>{
                                                            getTaskId({type:'SignOut',id:list1[value].id})
                                                            Actions.push('SignOut')
                                                        }:null

            }
                  style={list1[value].signOutStatus ==='0'?styles.eleBtnNoDone
                                                          :styles.eleBtnDone}>{
                                                                list1[value].signOutStatus ==='0'?
                                                                    list1[value].signInStatus === '' || list1[value].signInStatus === '0'?'签到':
                                                                        list1[value].isChangeForm !=='1'?'下发整改':
                                                                    '签退':
                                                                '已经办理'}
                                            </Text>
                                        </View>
                                        <View style={{flex:1}}>
                                            <Text onPress={() => {setTaskNewId(list1[value].id)
                                                                        Actions.push('StateTracking')}}
                                                  style={styles.eleBtn}>进度查看</Text>
                                        </View>
                                            </View>:
                                    tabNum == 2?<View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                                            <Text onPress={() => {list3[value].receiveStatus ==='1'?Actions.push('projectsList')
                                                                :receiveTask(list3[value].id,list3[value].taskNum,list3[value].name)}}
                                                  style={styles.eleBtn}>{list3[value].receiveStatus ==='1'?'前往办理':'接收任务'}</Text>
                                        </View>:
                                        <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                                            <Text onPress={() => {setTaskNewId(list4[value].id)
                                                    Actions.push('StateTracking')}}
                                                  style={styles.eleBtn}>进度查看</Text>
                                        </View>
                        }

                    </View>
            </View>
        );

        let tableData1 = [];
        let tableData2 = [];
        let tableData3 = [];
        let tableData4 = [];

        if (list1 !== undefined){
            tableData1 = list1.map((val, index) => {
                // let arra = [perPage*(page-1)+index + 1];
                if(val.tableData.length < 6){
                    // val.tableData = arra.concat(val.tableData)
                    val.tableData.push(ele(index))
                }
                return val.tableData
            });
        }
        if (list2 !== undefined){
            tableData2 = list2.map((val, index) => {
                // let arra = [perPage*(page-1)+index + 1];
                if(val.tableData.length < 5){
                    // val.tableData = arra.concat(val.tableData)
                    val.tableData.push(ele(index))
                }
                return val.tableData
            });
        }
        if (list3 !== undefined){
            tableData3 = list3.map((val, index) => {
                // let arra = [perPage*(page-1)+index + 1];
                if(val.tableData.length < 6){
                    // val.tableData = arra.concat(val.tableData)
                    val.tableData.push(ele(index))
                }
                return val.tableData
            });
        }
        if (list4 !== undefined){
            tableData4 = list4.map((val, index) => {
                // let arra = [perPage*(page-1)+index + 1];
                if(val.tableData.length < 6){
                    // val.tableData = arra.concat(val.tableData)
                    val.tableData.push(ele(index))
                }
                return val.tableData
            });
        }
        return (
            <View style={styles.container}>
                {
                    tabNum ==0?
                        <Table borderStyle={{borderWidth: 0.5, borderColor: Colors.tableColor}}>
                            <Row data={tableHead2} flexArr={[4,4, 2, 2,2,1]} style={styles.head} textStyle={styles.text}/>
                            <TableWrapper style={{flexDirection: 'row'}}>
                                <Rows data={tableData2} flexArr={[4,4, 2, 2,2,1]} style={styles.row} textStyle={styles.itemText}/>
                            </TableWrapper>
                        </Table>:
                      tabNum ==1?
                            <Table borderStyle={{borderWidth: 0.5, borderColor: Colors.tableColor}}>
                                <Row data={tableHead1} flexArr={[4,4, 3, 3,3,6]} style={styles.head} textStyle={styles.text}/>
                                <TableWrapper style={{flexDirection: 'row',alignItems:'center',justifyContent: 'center'}}>
                                    <Rows data={tableData1} flexArr={[4,4, 3, 3,3,6]} style={styles.row} textStyle={styles.itemText}/>
                                </TableWrapper>
                            </Table>:
                            tabNum == 2?
                                <Table borderStyle={{borderWidth: 0.5, borderColor: Colors.tableColor}}>
                                    <Row data={tableHead3} flexArr={[4,3, 2, 2,2,2,1]} style={styles.head} textStyle={styles.text}/>
                                    <TableWrapper style={{flexDirection: 'row'}}>
                                        <Rows data={tableData3} flexArr={[4,3, 2, 2,2,2,1]} style={styles.row} textStyle={styles.itemText}/>
                                    </TableWrapper>
                                </Table>:
                                    <Table borderStyle={{borderWidth: 0.5, borderColor: Colors.tableColor}}>
                                        <Row data={tableHead4} flexArr={[4,3, 2, 2,2,2,1]} style={styles.head} textStyle={styles.text}/>
                                        <TableWrapper style={{flexDirection: 'row'}}>
                                            <Rows data={tableData4} flexArr={[4,3, 2, 2,2,2,1]} style={styles.row} textStyle={styles.itemText}/>
                                        </TableWrapper>
                                    </Table>
                }
                <View>
                    <Modal
                        animationType='slide'
                        onRequestClose={()=> this.onRequestClose()}
                        visible={thisOpen}
                        transparent={true}
                    >
                        <View style={styles.containerView}>
                            <View style={{backgroundColor:Colors.contentContainerBg,width:'80%',borderRadius:20,borderWidth:1,
                                borderColor:Colors.btnPrimaryBg,height:'80%',justifyContent:'center',alignItems:'center'}}>
                                <View style={styles.taskContainer}>
                                    <Text style={{ fontSize: 30, }}>接收任务名称：{receiveTaskName}</Text>
                                    {/*<Text style={{ fontSize: 25, }}>任务编号：{taskNum}</Text>*/}
                                </View>

                                <View style={styles.selectContainer}>
                                    {
                                        userList.map((val, index) =>
                                            <View style={[styles.person, val.selected?styles.selectBg : styles.unselectBg]}>
                                                <Text style={styles.personText}
                                                      onPress={() =>{thisPersonSelect(val.id)}}>{val.name}：{val.selected?'已选择':'未选择'}</Text>
                                            </View>
                                        )
                                    }
                                </View>

                                <View style={{flexDirection:'row',height:'20%',marginTop:20}}>
                                    <TouchableOpacity onPress={() => {thisTaskReceive(receiveTaskId)}}>
                                        <View style={[styles.person, {backgroundColor: Colors.btnPrimaryBg}]}>
                                            <Text style={styles.personText}>
                                                确认
                                            </Text>
                                        </View>
                                    </TouchableOpacity>
                                    <View style={{marginLeft:5,marginRight:5}}></View>
                                    <TouchableOpacity onPress={() => {thisTaskCancle(receiveTaskId)}}>
                                        <View style={[styles.person, {backgroundColor: Colors.btnPrimaryBg}]}>
                                            <Text style={styles.personText}>
                                                取消
                                            </Text>
                                        </View>
                                    </TouchableOpacity>
                                </View>
                            </View>

                        </View>
                    </Modal>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    baseV: {
        display: 'flex',
        flexDirection: 'column',
    },
    baseH: {
        display: 'flex',
        flexDirection: 'row',
        backgroundColor: Color.white,
    },
    itemStyle: {
        display: 'flex',
        flexDirection: 'row',
        height: 50,
    },
    line: {
        backgroundColor: Color.navbarBackground,
        height: 1
    },
    BtnLocal: {
        backgroundColor: Color.white,
        paddingBottom: 10,
        paddingLeft: 20,
        paddingRight: 20,
        paddingTop: 20,
        textAlign: 'center',
        width: '100'
    },
    BtnContainer: {
        marginTop: 10,
        marginBottom: 10,
        backgroundColor: Color.white,
        paddingBottom: 10,
        paddingLeft: 20,
        paddingRight: 20,
        flex: 1
    },
    btnText: {
        color: '#fff',
        fontSize: 26,
        borderRadius: 10,
        textAlign: 'center',
        backgroundColor: Color.btnPrimaryBg,
        marginLeft:20,
        marginRight:20,
        marginTop: 10,
        marginBottom: 10,
    },
    container: {marginBottom: 70, backgroundColor: Color.white,},//marginBottom:30
    text: {textAlign: 'center', color: '#fff', fontSize: 22,},
    itemText: {
        textAlign: 'center',
      fontSize: 19,
      alignItems:'center',
      justifyContent: 'center',
      marginTop:10,
      marginBottom:10
    },
    row: {
        // height: 48,
      backgroundColor: '#fff',
    },
    head: {height: 50, backgroundColor: Color.navbarBackground},

    fenye: {
        height: 35,
        paddingBottom: 2,
        paddingLeft: 25,
        paddingRight: 25,
        alignItems: 'center',
        color: '#fff',
        textAlign: 'center',
        backgroundColor: Color.btnPrimaryBg,
        borderRadius: 4,
        fontSize: 25
    },
    eleBtnContainer: {
        // marginLeft:25,
        alignItems:'center',
        justifyContent: 'center'
    },
    eleBtnNo: {
        height: 28,
        paddingTop: 2,
        paddingBottom: 2,
        paddingLeft: 10,
        paddingRight: 10,
        alignItems: 'center',
        color: '#fff',
        textAlign: 'center',
        backgroundColor: Color.unselectGrayBg,
        borderRadius: 7,
        fontSize: 18
    },
    eleBtn: {
        marginLeft:10,
        marginRight:10,
        height: 28,
        paddingTop: 2,
        paddingBottom: 2,
        paddingLeft: 10,
        paddingRight: 10,
        alignItems: 'center',
        color: '#fff',
        textAlign: 'center',
        backgroundColor: Color.btnPrimaryBg,
        borderRadius: 7,
        fontSize: 18
    },
    eleBtnNoDone: {
        marginLeft:10,
        marginRight:10,
        height: 28,
        paddingTop: 2,
        paddingBottom: 2,
        paddingLeft: 10,
        paddingRight: 10,
        alignItems: 'center',
        color: '#fff',
        textAlign: 'center',
        backgroundColor: Color.dataYellowOuter,
        borderRadius: 7,
        fontSize: 18
    },
    eleBtnDone: {
        marginLeft:10,
        marginRight:10,
        height: 28,
        paddingTop: 2,
        paddingBottom: 2,
        paddingLeft: 10,
        paddingRight: 10,
        alignItems: 'center',
        color: '#fff',
        textAlign: 'center',
        backgroundColor: Color.unselectGrayBg,
        borderRadius: 7,
        fontSize: 18
    },
    content: {
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#EBEBEB',
        flex: 1
    },
    containerView: {
        width: '100%',
        height: '100%',
        // backgroundColor: 'rgba(52,52,52,0.5)',
        justifyContent: 'center',
        alignItems: 'center',
        // paddingLeft:'25%',
        // paddingRight:'25%'
    },
    taskContainer: {
        // marginTop: 40,
        alignItems: 'center',
        height:'20%'
    },
    selectContainer: {
        // marginTop: 20,
        alignItems: 'center',
        height:'50%'
    },
    person: {
        marginTop: 10,
        paddingTop: 5,
        paddingBottom: 5,
        paddingLeft: 20,
        paddingRight: 20,
        borderRadius: 5,
        width: 250,
    },
    unselectBg: {
        backgroundColor: Colors.unselectGrayBg,
    },
    selectBg: {
        backgroundColor: Colors.selectGrayBg,
    },
    personText: {
        fontSize: 24,
        color: '#fff',
        textAlign: 'center',
    },
});